
<blockquote class='quote-from-book'>	<p><span class='ic'>“</span>Fi-nally is a conventionally acceptable line-end hyphenation, but final-ly is not, because it takes too little of the word ahead to the next line.”</p>
 </blockquote>
	<p>Unlike much word processing and page-layout software, there is not yet any automatic hyphenation built into web browsers. The next best method is to insert hyphen characters&nbsp;manually.</p>

	<p>Liquid layouts and resizable text mean that, on the Web, one never knows which word will be at the end of a line. To deal with this in <abbr title="HyperText Mark-up Language">HTML</abbr>, there are two types of hyphens: the plain hyphen and the soft hyphen. Browsers treat the plain hyphen as just another character. The soft hyphen tells the browser where a word break can occur, and should only be displayed when a word is being broken across two&nbsp;lines.</p>

	<p>The soft hyphen has existed since <abbr title="HyperText Mark-up Language">HTML</abbr> 3.2, and is <a href="http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.3">explained well in the <abbr title="HyperText Mark-up Language">HTML</abbr> 4.0</a> recommendation. Its entity code is <code>&amp;shy;</code> or <code>&amp;#173;</code> and is used as&nbsp;follows:</p>

<pre><code>anti&amp;shy;dis&amp;shy;est&amp;shy;ab&amp;shy;lish&amp;shy;ment&amp;shy;arian&amp;shy;ism</code></pre>

	<p>Which renders in your browser as: anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism.</p>

	<p>By definition, a soft hyphen should only appear when the word is wrapped. Browser support for this was patchy, but the situation has improved recently. Internet Explorer 6&nbsp;treats the soft hyphen correctly, as do Opera, Safari 2&nbsp;and Firefox 3. However older Gecko-based browsers such as Firefox 2&nbsp;hide all soft hyphens and do not perform any hyphenation. By contrast Safari 1&nbsp;displays all soft hyphens regardless of whether the word is&nbsp;wrapping.</p>

	<h2>The&nbsp;Future</h2>

	<p>Until recently, the <a href="http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a> contained the <code>hyphenate</code> property which could be set to <code>auto</code> or <code>none</code>. This property introduced the concept of automatic hyphenation to browsers, and would require that the web browser has a hyphenation dictionary for the language of the text being hyphenated. For&nbsp;example:</p>

<pre><code>p {
  hyphenate: auto;
}</code></pre>


	<p>At the time of writing, the latest <a href="http://www.w3.org/TR/2007/WD-css3-text-20070306/">Working Draft of March 2007</a>, states that the definition of the hyphenation feature is still very much up-in-the-air, but it’s likely that advanced hyphenation controls will be introduced. The <a href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, among these are the <code>hyphenate-before</code> and <code>hyphenate-after</code> properties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For&nbsp;example:</p>

<pre><code>p {
  hyphenate-before: 2;
  hyphenate-after: 3;
}</code></pre>
 